@charset "utf-8";

@import "common";
@import "reset";



.web{
    height: 100%;
    overflow:scroll; 

    header{
        .nav{
            margin: vw(50px) vw(25px) vw(20px) vw(25px);
            width: vw(705px);
            height: vw(60px);
            display: flex;
            justify-content: space-between;
            .back{
                display: inline-block;
                width: vw(125px);
                height: vw(60px);
                border-radius: vw(30px);
                
                box-sizing: border-box;
                border: 1px solid $index_color;
                text-align: center;
                span{
                    font-size: vw(30px);
                }
              
            }
            span{
                line-height: vw(60px);
            }
            .city_box{
                margin-bottom: vw(30px);
              i{
                  font-size:vw(60px);
                  color: $index_color;
                  vertical-align: text-top;
                  line-height: vw(60px);
                  
              }

                
              
            }
        }




    }







    section{
        .avatar_box{

       
        display: flex;
        justify-content: space-around;
        .avatar{
            display: inline-block;
            img{
                width: vw(170px);
                height: vw(170px);
            }

        }
        .text{
            display: inline-block;
            width: vw(420px);
            a{
              vertical-align: text-bottom;
                color: black;

            }
            
            p:nth-of-type(2){  
                margin-top: vw(30px);
                a{
                    color: gray;
                }
                
            }
           p:nth-of-type(1){
               color: black;
               margin-top: vw(30px);
           }
        }
        
    }
    i{
        font-size: vw(80px);
        line-height: vw(160px);

    }



    .box_first{
        display: inline-block;
        width: vw(190px);
        height: vw(150px);
        background-color:#b2e0a0;
        text-align: center;
        margin-left: vw(23px);
        margin-right: vw(30px);
        // display: flex;
        // justify-content: space-between;
        i{
            font-size: vw(120px);
            line-height: vw(100px);
        
        }

        span{
            // padding-left: vw(20px);
        }
    }




    .more{
        position: relative;
        height: vw(100px);
        .right{
            // height: 0px;
        //   padding-top: vw(20px);
          padding-left: vw(20px);
          i{
            padding-left: vw(10px);
            font-size: vw(30px);
              color: $index_color;
          }
          span{
              
              font-size:vw(30px) ;
              vertical-align: super;
          }
        }
        display: flex;
        justify-content: space-between;
        .left{
            padding-top: vw(70px);
            display: inline-block;
            span{
                font-size: vw(24px);
                vertical-align: super;
                line-height: vw(24px);
            }
        .box{
            
          //   margin-top: vw(50px);
          margin-right:vw(22px) ;
            display: inline-block;
            width: vw(28px);
            height: vw(28px);
            border-radius: vw(25px);
            box-sizing: border-box;
            border: 1px solid $index_color;
            i{
              font-size: vw(25px);
              vertical-align: super;
              color: $index_color;
              line-height: vw(10px);
          }
        }
      }
      
   

    }
    .white_box{
        height: vw(75px);
        width: 100%;
    }

.button{
    display: flex;
    justify-content: space-between;
    margin-top: vw(50px);


    .button_box_left{
        margin-left: vw(100px);
        display: inline-block;
        height: vw(80px);
        width: vw(175px);
        background-color: $index_color;
        border-radius: vw(40px);
        text-align: center;
        line-height: vw(80px);
    }
    
    .button_box_right{
        display: inline-block;
        margin-right: vw(105px);
        height: vw(80px);
        width: vw(175px);
        background-color: $index_color;
        border-radius: vw(40px);
        text-align: center;
        line-height: vw(80px);
    }
    

}

}



    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #bbb9ba;
        width: 100%;
        background-color: #fff;
        height: vw(120px);
        .left_right{
            margin-left: vw(50px);
            margin-right:vw(50px) ;
        ul {
          
    
            padding: r(15px) 0 r(12px);
            li {
    
                width: 25%;
                text-align: center;
                position: relative;
                a {
                    color: #8b8b8b;
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    i {
                        font-size: r(38px);
                        color: $index_color;
                    }
                    p {
                        font-size: r(18px);
                    }
                    &.active {
                        color: $index_color;
                    }
                }
            }
        }
    
    }
}
}